import React,{ useEffect, useState } from 'react'
import { useSelector,useDispatch } from 'react-redux';
import type { RadioChangeEvent } from 'antd';
import { Tabs } from 'antd';
import '../../assets/sass/home_page/console/Console.scss'
import Draggable from 'react-draggable'; 
import Tuo from '../../component/Tuo/Tuo';
import Tuo2 from '../../component/Tuo/Tuo2';
import {addlist} from "../../store/store_ff/count_img"
function Console() {

  const [tabPosition, setTabPosition] = useState('left');
  
  const datas=useSelector((store:any)=>store.count.data)
  // const list=useSelector((store:any)=>store.count.list)
  // console.log(list,'qwrqw')
   const changeTabPosition = (e:any) => {
    setTabPosition(e.target.value);
  };
  const dispatch=useDispatch()
  const onclicks=(item:any)=>{
    console.log(item)
    dispatch(addlist(item))
  }
  
  
  return (
    <div>
      <div className='demo'>
      <div className="left_console">
        <div className="xuanxiang">
         <Tabs
        tabPosition={tabPosition}
        items={datas.map((item:any,index:any) => {
          return {
            label: `${item.name}`,
            key: index,
            children: <div>
              {item.cnmd && <img className='images' onClick={()=>onclicks(item)} src={item.cnmd}/>}
              
              <h3 onClick={()=>onclicks(item)}>{item.wcnmd && item.wcnmd}</h3>
            </div>
          };
        })}
      />
        </div>   
      </div>
      <div className="center_console">
          <Tuo></Tuo>
      </div>
      <div className="right_console">
        <Tuo2></Tuo2>
      </div>
      </div>
    </div>
  )
}

export default Console
